<!-- 顶部搜索栏 -->
<template>
	<u-sticky offset-top="-45">
		<u-row class="Search">
			<u-col span="2" class="u-demo-block__content"><u-avatar :src="require('@/assets/avatar/00fb2f5b2c9a39a8012034f76e8c48.jpg')"></u-avatar></u-col>
			<u-col span="9.5"><u-search placeholder="请输入关键字" v-model="keyword" :show-action="false"></u-search></u-col>
			<u-col><u-button class="_search" type="primary" shape="circle" text="搜索"></u-button></u-col>
		</u-row>
	</u-sticky>
</template>

<script>
export default {
	data() {
		return {
			keyword: ''
		};
	}
};
</script>

<style lang="scss" scoped>
.Search {
	// 给组件加个上外边距
	padding: calc(10rpx + var(--status-bar-height)) 0 10rpx 0;
	background-color: #7bb7fd;
	.u-demo-block__content {
		padding-left: calc((100% / 12 * 2 - 80rpx) / 2) !important;
	}
	._search {
		position: relative;
		left: -455rpx;
		height: 60rpx;
		width: 144rpx;
		font-weight: bold !important;
	}
}
</style>
